import React, { Component } from 'react'
import paramUtil from '@/utils/paramUtil'
import { Spin } from 'antd'
import './index.css'
import Button from '@/components/basicWidget/Button'
import themUtil from '@/utils/themeStyles'

class ThemeStyles extends Component {

    constructor(props) {
        super(props)
        this.state = {
            themeStyles: null,
            loading: true
        }
    }

    async componentDidMount() {
        const themeStyles = await paramUtil.get('themeStyles')
        if (themeStyles) {
            const paramItemCode = themeStyles.children.map(item => item.code)
            await new Promise(resolve => {
                this.setState({
                    themeStyles: paramItemCode,
                    loading: false
                }, resolve)
            })
        }
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div className='ThemeStyles-main'>
                {
                    this.state.themeStyles.length > 0 ?
                        this.state.themeStyles.map((item, index) => {
                            return (
                                <div className='ThemeStyles-main-item' key={index}>
                                    <img src={require(`./static/${item}.PNG`)} alt={item}></img>
                                    <Button onClick={() => {themUtil.change(item)}}>选择</Button>
                                </div>
                            )
                        }) : ''
                }
            </div>
        )
    }
}

export default ThemeStyles
